<template>
	<div class="search_title">
    <a class="goback" @click="goUrl('index')">《</a>
    <div class="search_menu">三</div>
  </div>
  <div class="search_value">
      <input type="text" name="search_value" @keyup="getAjax" @keyup.enter="getAjax" v-model="s_val" placeholder="输入...">
  </div>
  <ul class="search_show">
      <li v-for="data of s_array" 
            transition="staggered">
        <a class="ss_title" @click="goUrl('search_show', data.word)">{{data.word}} <span class="ywtype"> - {{ setName(data.ywtype) }}</span></a>
        <span class="ss_count">{{data.count}}条</span>
      </li>
  </ul>
  <p class="nCity" v-show="s_array.length==0">没有找到您要的信息....</p>
  <Vfooter></Vfooter>
</template>

<script>

import Vfooter from 'components/Vfooter'
var Vue = require('vue');
var VueResource = require('vue-resource');
Vue.use(VueResource);

export default {
  data () {
    return {
      s_val: '',
      s_array: []
    } 
  },
  methods: {
    goback: function(){
      history.go(-1);
      // history.back();
    },
    getAjax: function(){
      if(this.s_val == ""){
        this.s_array = [];
        return;
      }
      // 目前只测试 city=dl
      var url = "https://m.fang.com/esf/?c=esf&a=ajaxGetSearchTip&orderby=esfcount&city=dl";
      this.$http.get(url,{
        params: {
          q: this.s_val // 关键词 
        }
      }).then(response => {
          this.s_array = response.body;
      },error => {
          console.log("请求状态码：" + err.status);
      })
    },
    setName: function(n){
        switch(n){
          case "出售": return "二手房";
          breack;
          case "出租": return "租房";
          breack;
          default: return n;
        }
    },
    goUrl: function(url, w){
      // 根据项目具体情况,改写目录文件名作为URL地址
      // 开发模式 可以使用相对/绝对路径
      // 生产模式 必须使用相对路径
      if(arguments.length >1){
        location.href = "../module/" + url + ".html?w=" + w;
      }else{
        location.href = "../module/" + url + ".html";
      }
    }
  },
  components:{
    Vfooter
  },
  computed: {

  }
}

</script>


<style>
*{
  margin:0px;
  padding: 0px;
}

.search_title{
  position: relative;
  width: 100%;
  height: 45px;
   font-size: 24px;
  color: #ccc;
}
.search_title .goback{
  position: absolute;
  top: 5px;
  left: 10px;
  width: 40px;
  height: 35px;
}
.search_title .search_menu{
  position: absolute;
  top: 5px;
  right: 10px;
}
.repeat_search{
  overflow: hidden;
  padding: 10px;
}

.search_value{
  box-sizing: border-box;
  width: 100%;
  padding: 15px;
}
.search_value input{
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding-left: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.search_show{
  padding: 0 20px;
  margin-bottom: 10px;
}
.search_show li{
  width: 100%;
  margin: 10px 0;
  overflow: hidden;
  font-size: 14px;
  color: #333;
}
.search_show li span{
  font-size: 12px;
  color: #ccc;
}
.nCity{
  padding: 20px;
  color: red; 
}
.search_show .ss_title{
  float: left;
}
.search_show .ss_count{
  float: right;
}
.staggered-transition {
    transition: all .6s ease;
    overflow: hidden;
    margin: 0;
    height: 20px;
}
.staggered-enter, .staggered-leave {
    opacity: 0;
    height: 0;
}
</style>